<template>
	<view class="content">
		<image class="background-image" src="../../static/loginbg.png" mode="aspectFill"></image>
		<view class="content-mask">
			<view class="app-title">申请账号</view>
			<view class="login-form">
				<view class="form-row">
					<view class="form-label">设置昵称：</view>
					<input class="form-input" type="text" />
				</view>
				<view class="form-row">
					<view class="form-label">手机号码/登录名：</view>
					<input class="form-input" type="text"  />
				</view>
				<view class="form-row">
					<view class="form-label">设置登录密码：</view>
					<input class="form-input" type="password"  />
				</view>
				<view class="form-row">
					<view class="form-label">确认登录密码：</view>
					<input class="form-input" type="password"  />
				</view>
				<view class="form-row">
					<view class="form-label">设置安全邮箱：</view>
					<input class="form-input" type="text"  />
				</view>
			</view>
			<view class="login-button" >申请加入</view>
			<view class="regist-button" >已有账号</view>
		</view>
	</view>
</template>
<style>
	.content {
		width: 100vw;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		color: #fff;
		display: flex;
		flex-direction: column;
	}
	.background-image{
		width: 100vw;
		height: 100vh;
		position: absolute;
		z-index:1;
	}
	.content-mask {
		position: absolute;
		z-index:2;
		width: 100vw;
		height: 100vh;
		color: #fff;
		display: flex;
		flex-direction: column;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.app-title {
		font-size: 150%;
		text-align: left;
		margin-top: 80rpx;
		margin-left:5%;
	}

	.app-title-sub {
		text-align: center;
		margin-top: 20rpx;
		letter-spacing: 25rpx;
	}

	.login-form {
		width: 80%;
		margin: 0 auto;
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow:1px 1px 2px rgba(0, 0, 0, 0.8) ;
	}

	.form-row {
		margin-top: 10rpx;
		margin-bottom:30rpx;
	}

	.form-label {
		font-size: 90%;
		color: #000 !important;
	}

	.form-input {
		margin-top: 10rpx;
		border-bottom:1px solid rgba(3,3,3,0.7);
		padding: 10rpx;
		padding-left:20rpx;
		letter-spacing: 5rpx;
		font-size: 110%;
		font-weight: bold;
		color: #000 !important;
	}

	.login-button {
		width: 70%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 15rpx;
		background-color: #ff2442;
		text-align: center;
		margin: 0 auto;
		margin-top: 80rpx;
		border-radius: 45rpx;
	}

	.regist-button {
		text-align: center;
		margin-top: 30rpx;
	}
</style>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
